<template lang="">
    <div>
    
      <ul>
        <input type="text" v-model="message" @keydown.enter="add()">
        <button @click="add()">提交</button>
        <li v-for="(item, index) in arr" :key="index">
        <span>内容：{{item.title}}</span> <span class="time">发布时间：{{item.createtime}}</span>
        <button @click="edit(index,item.id)">修改</button>
        <button @click="del(index)">删除</button>
        </li>
      </ul>
      <div v-show="change" class="change">
        <input type="text" v-model="temporary" >
        <button @click="confirm()">确定</button>
      </div>
    </div>
  </template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            message: "",
            arr: [],
            change: false,
            temporary: "",
            item: {}
        }
    },
    methods: {

        add() {
            if (this.message == "") {
                return
            }
            let now = new Date()
            let obj = { title: this.message, createtime: now.toLocaleString() };
            axios.get('http://jx.xuzhixiang.top/ap/api/todos/create.php', { params: obj }).then(res => {
                console.log(res.config.params);
                this.arr.push(obj)
                this.message = ""
            })
        },
        del(index) {
            if (this.change) {
                this.change = false
            }
            let delAPI = "http://jx.xuzhixiang.top/ap/api/todos/delete.php"
            axios.get(delAPI, { params: { id: this.arr[index].id } }).then(res => {
                this.arr.splice(index, 1)
            })


        },
        edit(index, id) {
            this.change = true
            this.item.i = index
            this.item.id = id
            this.temporary = this.arr[index].title
        },
        confirm() {
            let updateAPI = "http://jx.xuzhixiang.top/ap/api/todos/update.php"
            console.log(this.item)
            let obj = {
                id: this.item.id,
                title: this.temporary
            }
            axios.get(updateAPI, { params: obj }).then(res => {
                console.log(this.item.i);
                this.arr[this.item.i].title = this.temporary
                this.change = false
            })

        },
        render() {
            let now = new Date()
            let obj = { pagenum: 1, pagesize: 10 };
            axios.get('http://jx.xuzhixiang.top/ap/api/todos/readlist.php', { params: obj }).then(res => {
                let resData = res.data.data
                console.log(resData);
                resData.forEach(item => {
                    this.arr.push({
                        title: item.title,
                        createtime: item.createtime,
                        id: item.id
                    })
                })

            })
        }
    },
    mounted() {
        this.render()
    },
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

ul {
    width: 500px;
    margin: 0 auto
}

li {
    list-style: none;
    height: 70px;
    border: 1px solid #ccc;
    position: relative;
}

.change {
    position: absolute;
    right: 305px;
    top: 100px;
}

.time {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>